<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"
    />
    <title>梦幻西游</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      @keyframes round {
        100% {
          transform: rotate(1turn);
        }
      }

      @keyframes video_scale {
        50% {
          transform: scale(1.06);
          opacity: 0.9;
        }
      }
      @media (min-width: 750px) {
        .focus {
          position: relative;
          height: 720px;
        }
        .focus-img {
          display: none;
        }
        .focus-video {
          width: 1920px;
          height: 720px;
          position: absolute;
          left: calc(50% - 1920px / 2);
        }
        .play-btn {
          position: absolute;
          left: calc(50% - 600px);
          top: calc(50% - 220px);
          width: 108px;
          height: 108px;
        }
        .play-btn img {
          position: absolute;
        }

        .play-btn img:nth-child(2) {
          animation: round 3s linear infinite;
        }

        .go_btn {
          position: absolute;
          top: 460px;
          left: calc(50% - 286px / 2);
        }
        .go_btn img {
          animation: video_scale 1.1s ease-out infinite;
        }
      }

      @media (max-width: 750px) {
        body {
          background-color: #132040;
          width: 100vw;
          overflow: hidden;
        }
        .focus {
          position: relative;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .focus-video {
          /* display: none; */
          height: calc( 421 / 750 * 100vw );
          position: absolute;
          left:-15vw;
        }
        .focus-img {
          position: absolute;
          width: 100vw;
          height: calc( 421 / 750 * 100vw );
        }
        .play-btn {
          position: absolute;
          width: 15vw;
          height: 15vw;
          left: 10vw;
          top: calc(50vh - 25vw);
        }
        .play-btn img {
          position: absolute;
          width: 15vw;
        }

        .play-btn img:nth-child(2) {
          animation: round 3s linear infinite;
        }

        .go_btn {
          position: absolute;
          top: 50vh;
          left: calc(50% - 36vw / 2);
        }
        .go_btn img {
          width: 36vw;
          animation: video_scale 1.1s ease-out infinite;
        }
      }
    </style>
  </head>
  <body onclick="play()">
    <div class="focus">
      <img class="focus-img" src="./m_images/video_bg.jpg" alt="" />
      <video id="video" class="focus-video" loop muted autoplay src="./video/focus_video.mp4"></video>
      <a href="javascript:;" class="play-btn">
        <img src="./images/video_play1.png" alt="" />
        <img src="./images/video_play2.png" alt="" />
      </a>
      <a class="go_btn" href="./index.html">
        <img src="./images/go_btn.png" alt="" />
      </a>
    </div>
    <audio id="audio" loop src="./sounds/hgs.mp3"></audio>
  </body>
  <script>
    function play() {
      document.getElementById('audio').play()
      document.getElementById('video').play()
    }
  </script>
</html>
